<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Vv - 排名助手</title>
    <meta name="description" content="VV,Vv排名助手,排名助手,排名软件,竞价软件,调价软件,查看百度推广异地排名." />
    <meta name="keywords" content="VV,Vv排名助手,排名助手,排名软件,竞价软件,调价软件,查看百度推广异地排名" />
    <link href="/static/style.css" rel="stylesheet" type="text/css"/>
    <script src="/static/jquery.min.js"></script>
    <script src="/static/jquery.form.js"></script>
    <script src="/static/jquery.validate.min.js"></script>
    <style>
        .footer{
            border-top: 1px solid #e7e8e9;
            width: 100%;
            float: left;
            clear: both;
            margin-top: 5px;
        }
        .footer p{
            text-align: center;
            padding: 10px;
            margin: 0px;
        }
        .container{
            margin: 0 auto;
            width:1000px;
            padding: 30px 0px 0px 0px;
        }

        .login{
            width: 300px;
            float: left;
            margin: 0px;
            padding: 0px 0px 0px 50px;
        }
        .reg{
            padding: 0px;
            width: 400px;
            float: right;
            border-left: 1px dashed #ddd;
            padding-left: 50px;
            height: 450px;
        }
        .clearfix{
            height: 70px;
            clear:both;
        }

        .xlarge{
            height: 25px;
            width: 300px;
            font-size: 13px;
        }
        label{
            font-size: 14px;
            font-weight: normal;
            padding-bottom: 8px;
            color: #646464;
            float: left;
        }
        .input{
            float: left;
            clear: both;
        }
        .error{
            clear: both;
            float: left;
            margin: 5px 0px;
            color: red;
        }

        .reg_error{
            color: red;
            font-size: 16px;
        }
        .reg_success{
            font-size: 16px;
            color: green;
        }
    </style>
</head>
<body>

<div>
    <table cellpadding="0" cellspacing="0" align="center" width="100%" class="t1">
        <tr bgcolor="#ededed">
            <td width="200px"></td>
            <td width="150px" height="40px">
                <a href="/"><b>Vv - 排名助手</b></a>
            </td>
            <td>&nbsp;</td>
        </tr>
    </table>
    <table cellpadding="0" cellspacing="0" align="center" width="100%" class="t1">
        <tr bgcolor="#6699cc">
            <td colspan="5" height="2" ></td>
        </tr>
    </table>
</div>



    <div class='container'>
            <div class='login'>
                <form id="login_form" class="form-stacked" method="POST">
                        <input type="hidden" name="type" value="personal" />
                        <div class="clearfix">
                            <label for="email">E-Mail</label>
                            <div class="input">
                                <input class="xlarge inp" id="login_email" name="login_email" size="30" type="email" />
                                <span class="help-inline"></span>
                            </div>
                        </div><!-- /clearfix -->
                        <div class="clearfix">
                            <label for="password">密码</label>
                            <div class="input">
                                <input class="xlarge inp" id="login_password" name="login_password" size="30" type="password" />
                                <span class="help-inline"></span>
                            </div>
                        </div><!-- /clearfix -->
                    <div class="">
                        <input type="submit" class="btn" value="登录" style="width: 80px;"/>
                    </div>
                    <div>
                        <span class="reg_error" id="login_error"></span>
                        <span class="reg_success" id="login_success"></span>
                    </div>
                </form>
            </div>

            <div class='reg'>
                <form id="reg_form" class="form-stacked" method="POST">
                        <div class="clearfix">
                            <label for="email">E-Mail</label>
                            <div class="input">
                                <input class="xlarge inp" id="reg_email" name="reg_email" size="30" type="text">
                                <span class="help-inline"></span>
                            </div>
                        </div><!-- /clearfix -->
                        <div class="clearfix">
                            <label for="password">密码</label>
                            <div class="input">
                                <input class="xlarge inp" id="reg_password" name="reg_password" size="30" type="password">
                                <span class="help-inline"></span>
                            </div>
                        </div><!-- /clearfix -->
                        <div class="clearfix">
                            <label for="password">确认密码</label>
                            <div class="input">
                                <input class="xlarge inp" id="reg_confirm_password" name="reg_confirm_password" size="30" type="password">
                                <span class="help-inline"></span>
                            </div>
                        </div><!-- /clearfix -->
                    <div class="">
                        <input type="submit" class="btn" value="注册" style="width: 80px;"/>
                    </div>
                    <div>
                        <span class="reg_error" id="reg_error"></span>
                        <span class="reg_success" id="reg_success"></span>
                    </div>
                </form>

            </div>
        </div>
<div class="footer">
    <p>© 2014 Vvtool, Inc. All rights reserved.</p>
</div>

<script>
    $("#login_form").validate({
        submitHandler: function(form){
            $(form).ajaxSubmit({
                url:"/loginPost",
                methods:"post",
                dataType:"json",
                data:{
                    email:function(){
                        return $("#login_email").val();
                    },
                    password:function(){
                        return $("#login_password").val();
                    }
                },
                beforeSend:function(){
                    $("#login_success").html("");
                    $("#login_error").html("");
                    $("#login_success").html("正在登录，请稍等……");
                },
                success:function(data){
                    $("#login_error").html("");
                    $("#login_success").html("");
                    if(data.status==1){
                        $("#login_success").html("登录成功，正在跳转……");
                        setTimeout(function(){
                            window.location.href = "/";
                        },500);

                    }else{
                        $("#login_error").html(data.msg);
                    }
                },
                error:function(err){
                    $("#login_error").html("服务器异常,请稍后再试");
                }
            });
        },
        rules:{
            login_email:{
                required: true,
                email: true
            },
            login_password:{
                required: true
            }
        },
        messages:{
            login_email:{
                required:"请输入邮箱",
                email:"请输入正确的邮箱，格式为 vvtool@vvtool.com"
            },
            login_password:{
                required:"请输入密码"
            }
        }
    })

    $("#reg_form").validate({
        submitHandler: function(form){
            $(form).ajaxSubmit({
                url:"/reg",
                methods:"post",
                dataType:"json",
                data:{
                    email:function(){
                        return $("#reg_email").val();
                    },
                    password:function(){
                        return $("#reg_password").val();
                    },
                    confirm_password:function(){
                        return $("#reg_confirm_password").val();
                    }
                },
                beforeSend:function(){
                    $("#reg_success").html("");
                    $("#reg_error").html("");
                    $("#reg_success").html("正在注册，请稍等……");
                },
                success:function(data){
                    $("#reg_success").html("");
                    $("#reg_error").html("");
                    if(data.status==1){
                        $("#reg_success").html("注册成功，正在跳转……");
                        setTimeout(function(){
                            window.location.href = "/";
                        },1500);

                    }else{
                        $("#reg_error").html(data.msg);
                    }
                },
                error:function(err){
                    $("#reg_error").html("服务器异常,请稍后再试");
                }
            });
        },
        rules:{
            reg_email:{
                required: true,
                email: true,
                remote: {
                    url: "/userExists",
                    type: "get",
                    data: {
                        email: function() {
                            return $("#reg_email").val();
                        }
                    }
                }
            },
            reg_password:{
                required: true,
                minlength:6,
                maxlength:20
            },
            reg_confirm_password:{
                required: true,
                equalTo: "#reg_password"
            }
        },
        messages:{
            reg_email:{
                required:"请输入邮箱",
                email:"请输入正确的邮箱，格式为 vvtool@vvtool.com",
                remote:"该邮箱已被注册"
            },
            reg_password:{
                required:"请输入密码",
                minlength:"密码长度在6-20个字符",
                maxlength:"密码长度在6-20个字符"
            },
            reg_confirm_password:{
                equalTo:"两次输入的密码不一致",
                required:"请再次输入密码"
            }
        }
    })

</script>
</body>
</html>
